<template>
  <view class="announcement-detail">
    <!-- 公告内容 -->
    <view class="announcement-content">
      <!-- 公告标题 -->
      <view class="content-header">
        <view class="title-section">
          <text class="announcement-title">{{ announcementDetail.title }}</text>
          <view v-if="announcementDetail.isTop" class="top-badge">
            <u-icon name="arrow-up" size="12" color="#fff"></u-icon>
            <text class="top-text">置顶</text>
          </view>
        </view>
        
        <view class="status-section">
          <u-tag 
            :text="announcementDetail.statusText" 
            :type="getStatusType(announcementDetail.status)"
            size="normal"
          ></u-tag>
        </view>
      </view>

      <!-- 公告元信息 -->
      <view class="content-meta">
        <view class="meta-item">
          <u-icon name="calendar" size="14" color="#999"></u-icon>
          <text class="meta-text">发布时间：{{ announcementDetail.publishTime }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="user" size="14" color="#999"></u-icon>
          <text class="meta-text">发布人：{{ announcementDetail.publisher }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="eye" size="14" color="#999"></u-icon>
          <text class="meta-text">阅读量：{{ announcementDetail.viewCount }}</text>
        </view>
      </view>

      <!-- 公告正文 -->
      <view class="content-body">
        <rich-text :nodes="announcementDetail.content"></rich-text>
      </view>

      <!-- 附件列表 -->
      <view v-if="announcementDetail.attachments && announcementDetail.attachments.length > 0" class="attachments-section">
        <view class="section-title">
          <u-icon name="paperclip" size="16" color="#1890ff"></u-icon>
          <text class="title-text">相关附件</text>
        </view>
        <view class="attachments-list">
          <view 
            v-for="(file, index) in announcementDetail.attachments" 
            :key="index"
            class="attachment-item"
            @click="handleDownload(file)"
          >
            <view class="file-icon">
              <u-icon :name="getFileIcon(file.type)" size="20" color="#1890ff"></u-icon>
            </view>
            <view class="file-info">
              <text class="file-name">{{ file.name }}</text>
              <text class="file-size">{{ file.size }}</text>
            </view>
            <view class="download-btn">
              <u-icon name="download" size="16" color="#1890ff"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 相关图片 -->
      <view v-if="announcementDetail.images && announcementDetail.images.length > 0" class="images-section">
        <view class="section-title">
          <u-icon name="image" size="16" color="#1890ff"></u-icon>
          <text class="title-text">相关图片</text>
        </view>
        <view class="images-grid">
          <view 
            v-for="(image, index) in announcementDetail.images" 
            :key="index"
            class="image-item"
            @click="handlePreviewImage(index)"
          >
            <image :src="image.url" mode="aspectFill" class="image"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="btn-group">
        <view class="action-btn" @click="handleLike">
          <u-icon name="heart" size="18" :color="isLiked ? '#ff4757' : '#999'"></u-icon>
          <text class="btn-text" :class="{ liked: isLiked }">{{ isLiked ? '已点赞' : '点赞' }}</text>
        </view>
        <view class="action-btn" @click="handleCollect">
          <u-icon name="star" size="18" :color="isCollected ? '#ffa502' : '#999'"></u-icon>
          <text class="btn-text" :class="{ collected: isCollected }">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </view>
        <view class="action-btn" @click="handleShare">
          <u-icon name="share" size="18" color="#999"></u-icon>
          <text class="btn-text">分享</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 公告详情数据
const announcementDetail = reactive({
  id: 1,
  title: '关于小区电梯维修的通知',
  status: 1,
  statusText: '进行中',
  isTop: true,
  publishTime: '2025-01-21 10:00',
  publisher: '物业服务中心',
  viewCount: 1256,
  content: `
    <p>尊敬的业主：</p>
    <p>为了保障居民出行安全，物业公司将于本周六对1-3号楼电梯进行例行维护保养，具体安排如下：</p>
    <p><strong>维修时间：</strong>2025年1月25日（周六）上午8:00-12:00</p>
    <p><strong>维修范围：</strong>1号楼、2号楼、3号楼所有电梯</p>
    <p><strong>注意事项：</strong></p>
    <ul>
      <li>维修期间电梯将暂停使用，请提前做好出行安排</li>
      <li>如有紧急情况，请联系物业服务中心：400-123-4567</li>
      <li>维修完成后将第一时间恢复电梯正常运行</li>
    </ul>
    <p>给您带来的不便，敬请谅解！</p>
    <p>物业服务中心</p>
    <p>2025年1月21日</p>
  `,
  attachments: [
    {
      name: '电梯维修计划表.pdf',
      size: '2.3MB',
      type: 'pdf',
      url: 'https://example.com/files/elevator-maintenance-plan.pdf'
    },
    {
      name: '维修通知.docx',
      size: '156KB',
      type: 'doc',
      url: 'https://example.com/files/maintenance-notice.docx'
    }
  ],
  images: [
    {
      url: 'https://example.com/images/elevator-1.jpg',
      name: '电梯维修现场1'
    },
    {
      url: 'https://example.com/images/elevator-2.jpg',
      name: '电梯维修现场2'
    },
    {
      url: 'https://example.com/images/elevator-3.jpg',
      name: '电梯维修现场3'
    }
  ]
})

// 用户操作状态
const isLiked = ref(false)
const isCollected = ref(false)

// 获取状态类型
const getStatusType = (status: number) => {
  switch (status) {
    case 1: return 'primary'
    case 2: return 'info'
    case 3: return 'warning'
    default: return 'info'
  }
}

// 获取文件图标
const getFileIcon = (type: string) => {
  switch (type) {
    case 'pdf': return 'file-text'
    case 'doc':
    case 'docx': return 'file-text'
    case 'xls':
    case 'xlsx': return 'file-text'
    case 'ppt':
    case 'pptx': return 'file-text'
    case 'jpg':
    case 'jpeg':
    case 'png': return 'image'
    default: return 'file'
  }
}


// 下载附件
const handleDownload = (file: any) => {
  uni.showLoading({
    title: '下载中...'
  })
  
  uni.downloadFile({
    url: file.url,
    success: (res) => {
      uni.hideLoading()
      if (res.statusCode === 200) {
        uni.showToast({
          title: '下载成功',
          icon: 'success'
        })
      }
    },
    fail: () => {
      uni.hideLoading()
      uni.showToast({
        title: '下载失败',
        icon: 'error'
      })
    }
  })
}

// 预览图片
const handlePreviewImage = (index: number) => {
  const urls = announcementDetail.images.map(img => img.url)
  uni.previewImage({
    current: index,
    urls: urls
  })
}

// 点赞功能
const handleLike = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '取消点赞',
    icon: 'success'
  })
}

// 收藏功能
const handleCollect = () => {
  isCollected.value = !isCollected.value
  uni.showToast({
    title: isCollected.value ? '收藏成功' : '取消收藏',
    icon: 'success'
  })
}

// 页面加载
onMounted(() => {
  console.log('公告详情页面加载完成')
  // 增加阅读量
  announcementDetail.viewCount++
})
</script>

<style lang="scss" scoped>
.announcement-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
}


.announcement-content {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .content-header {
    margin-bottom: 30rpx;
    
    .title-section {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .announcement-title {
        flex: 1;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-right: 20rpx;
      }
      
      .top-badge {
        background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
        color: #fff;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        font-size: 20rpx;
        
        .top-text {
          margin-left: 4rpx;
        }
      }
    }
    
    .status-section {
      display: flex;
      justify-content: flex-start;
    }
  }
  
  .content-meta {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin-bottom: 30rpx;
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 12rpx;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 12rpx;
      
      .meta-text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  
  .content-body {
    margin-bottom: 40rpx;
    
    :deep(p) {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }
    
    :deep(strong) {
      font-weight: 600;
      color: #1890ff;
    }
    
    :deep(ul) {
      margin: 20rpx 0;
      padding-left: 40rpx;
      
      li {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 12rpx;
      }
    }
  }
  
  .attachments-section,
  .images-section {
    margin-bottom: 40rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .attachments-list {
      .attachment-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        background-color: #f8f9fa;
        border-radius: 12rpx;
        margin-bottom: 16rpx;
        
        .file-icon {
          width: 60rpx;
          height: 60rpx;
          background-color: #e6f7ff;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
        }
        
        .file-info {
          flex: 1;
          
          .file-name {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .file-size {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .download-btn {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    
    .images-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16rpx;
      
      .image-item {
        aspect-ratio: 1;
        border-radius: 12rpx;
        overflow: hidden;
        
        .image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .btn-group {
    display: flex;
    justify-content: space-around;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      padding: 20rpx;
      
      .btn-text {
        font-size: 24rpx;
        color: #999;
        
        &.liked {
          color: #ff4757;
        }
        
        &.collected {
          color: #ffa502;
        }
      }
    }
  }
}
</style>
